Step 2 of 4: Adding a C1RangeSlider Control

In the previous step you created a new WPF or Silverlight project and added a Rectangle control with a gradient to the application. In this step you'll continue by adding a C1RangeSlider control that will control the gradient fill in the Rectangle.

Complete the following steps:

In the XAML window of the project, place the cursor between the </Rectangle> and </Grid> tags and click once.
Navigate to the Toolbox and double-click the C1RangeSlider icon to add the control to the application on top of the Rectangle.
Give your control a name by adding x:Name="c1rs1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML
Copy Code
<c1:C1RangeSlider x:Name="c1rs1">
By giving it a unique identifier, you'll be able to access the control in code.

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1">

Add a margin by adding Margin="50" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50">
This will set each edge the same distance away from the grid's border.

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50">

Set the Orientation property to Vertical by adding Orientation="Vertical" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

Example Title
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical">
By default Orientation is Horizontal and the control appears across the page.

Example Title	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical">

Set the UpperValue property to 1 by adding UpperValue="1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1">
The upper thumb will now begin at 1.

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1">

Set the Maximum property to 1 by adding Maximum="1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1">
Users will now not be able to select a value greater than 1.

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1">

Set the ValueChange property to 0.1 by adding ValueChange="0.1" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">
When you click on the slider track at run time, the slider thumb will now move by 0.1 units.

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">

Set the Opacity property to "0.8" by adding Opacity="0.8" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

Example Title
Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">
By default this property is set to 1 and the control appears completely opaque. Changing this to a lower number will make the control appear slightly transparent.

Example Title	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">

Indicate event handlers by adding LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

XAML	Copy Code
<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged">

XAML

Copy Code

<c1:C1RangeSlider x:Name="c1rs1" Margin="50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged">

You'll add code for these event handlers in a later step.

Run your application now and observe that it looks similar to the following:

You've successfully set up your application's user interface, but right now the slider will do nothing if you move it. In the next step you'll add code to your application to add functionality.